<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>GenBI-WebSocket</title>
    <link href="components/bootstrap/bootstrap.min.css" rel="stylesheet">
    <script src="components/bootstrap/bootstrap.min.js"></script>
    <link href="components/JsonViewer/json-viewer.css" rel="stylesheet">
    <script src="components/JsonViewer/json-viewer.js"></script>
    <script src="components/jquery-3.7.1.min.js"></script>
    <script src="components/marked.min.js"></script>
    <style>
        body {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        /* #divResult {
            white-space: pre-wrap;
            font-family: monospace;
        } */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #dddddd;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-3 bg-primary-subtle">
                <h2>Setting</h2>
                <select class="form-select" aria-label="Data profile" id="selectDataProfile">
                </select>
                <select class="form-select" aria-label="Bedrock Model Id" id="selectBedrockModelId">
                </select>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="chkUseRag" checked>
                    <label class="form-check-label" for="chkUseRag">
                        Using RAG from Q/A Embedding
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="chkQueryResult" checked>
                    <label class="form-check-label" for="chkQueryResult">
                        Visualize Results
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="chkIntentNerRecognition" checked>
                    <label class="form-check-label" for="chkIntentNerRecognition">
                        Intent Ner Recognition
                    </label>
                </div>
            </div>
            <div class="col-9">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="Input your question" id="textKeywords"
                        value="销量前十的商品是什么?" aria-label="Input your question" aria-describedby="buttonAsk"
                        onkeydown="searchKeydown(event);">
                    <button class="btn btn-outline-secondary" type="button" id="buttonAsk" disabled
                        onclick="ask(event);">Ask</button>
                    <button class="btn btn-outline-secondary" type="button" id="buttonRESTful" onclick="goRESTful();">Go
                        RESTful</button>
                </div>
                <div id="divResult"></div>
            </div>
        </div>
    </div>
    <script>
        const session_id = `session${Date.now()}`;
        const currentHostname = window.location.hostname;
        const currentPort = window.location.port;
        const ws = new WebSocket(`ws://${currentHostname}:${currentPort}/qa/ws`);

        const buttonAsk = document.getElementById('buttonAsk');
        const divResult = document.getElementById('divResult');

        function enableAsk() {
            buttonAsk.disabled = false;
        }

        function disableAsk() {
            buttonAsk.disabled = true;
        }

        ws.onopen = function (event) {
            enableAsk();
        }

        ws.onclose = function (event) {
            disableAsk();
        }

        var resultPieces = [];
        ws.onmessage = function (event) {
            let data = JSON.parse(event.data);
            if (data.content_type == "end") {
                enableAsk();
                return;
            }
            if (data.content_type == "exception") {
                enableAsk();
                alert(data.content);
                return;
            }
            resultPieces.push(data.content);
            let result = resultPieces.join("");
            divResult.innerHTML = marked.parse(result);
        };

        function init() {
            resultPieces.length = 0;
            divResult.innerHTML = "";
        }

        function ask(event) {
            init();
            disableAsk();
            var payload = {
                "session_id": session_id,
                "keywords": $("#textKeywords").val(),
                "use_rag": $("#chkUseRag").prop("checked"),
                "query_result": $("#chkQueryResult").prop("checked"),
                "intent_ner_recognition": $("#chkIntentNerRecognition").prop("checked"),
                "profile_name": $("#selectDataProfile").val(),
                "bedrock_model_id": $("#selectBedrockModelId").val(),
            };
            ws.send(JSON.stringify(payload));
            event.preventDefault();
        }

        function searchKeydown(event) {
            if (event.keyCode == 13) {
                ask(event);
            }
        }

        function goRESTful() {
            window.location = "RESTful.html";
        }

        $(document).ready(function () {
            $.get("/qa/option", function (data) {
                data.data_profiles.forEach(function (item) {
                    $("#selectDataProfile").append(`<option value="${item}">${item}</option>`);
                });
                $("#selectDataProfile").val($("#selectDataProfile option:last").val());
                data.bedrock_model_ids.forEach(function (item) {
                    $("#selectBedrockModelId").append(`<option value="${item}">${item}</option>`);
                });
            });
        });
    </script>
</body>

</html>